<template>
  <el-carousel :interval="5000" arrow="always" height="500px">
    <el-carousel-item
      v-for="(item,index) in carouselItems"
      :key="index"
      class="carouselitem"
    >
      <!-- <a :href="'/News/' + item.newsId"> -->
      <img
        :src="baseImgURL+item.newsTitlePic"
        alt="无法显示"
      >

      <!-- 有一个问题：就是img控件无法读出item项src的值 -->
      <!-- 解决方案为：直接imgurl里存的是图片的名称，通过字符串拼接拿到完整路径，而后直接进行跨域请求 -->

      <h3>{{ item.newsDescribe }}</h3>
      <!-- </a> -->
    </el-carousel-item>
  </el-carousel>

</template>

<style scoped>
.carouselitem {
  height: 100%;
}
.carouselitem > a {
  position: relative;
}
.carouselitem img {
  width: 100%;
  height: 100%;
}
.carouselitem h3 {
  color: #fff;
  font-size: x-large;
  font-weight: 600;
  opacity: 0.75;
  display: inline-block;
  line-height: 120%;

  /* height: 10%;
   */
  width: 80%;
  text-align: center;
  /* margin-top: 50%;
  margin-left: 20%; */
  position: absolute;
  top: -200%;
  left: 10%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>

<script>
import {baseNewsTitlePicURL} from '@/utils/constTool'
export default {
  props: {
    carouselItems: {
      type: Array,
      required: true
    }
  },
  data: () => ({
    baseImgURL: baseNewsTitlePicURL
  }),
  computed: {
    getCarousel() {
      let queryindex = 0
      if (this.$route.params.id != null) {
        queryindex = this.$route.params.id
      }
      console.log(
        this.$store.getters.getcarousels.filter(
          (c) => c.newsCategoryId == queryindex
        )
      )
      return this.$store.getters.getcarousels.filter(
        (c) => c.newsCategoryId == queryindex
      )
    }
  }
}
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
